<template>
	<view v-if="showInfo" class="ratio" @click.stop="shows()" :style="[vw, vh]">
		<view class="centerWar">
			<view class="titleWar">
				<view class="titleWarLeft"></view>
				<text class="titleWarCenter">土壤指数</text>
				<image class="titleWarRight" src="@/static/monitor/close.png" mode="aspectFill"></image>
			</view>
			<view class="tabWar">
				<view style="width: 600rpx;height: 600rpx"><l-echart style="width: 600rpx;height: 600rpx" ref="chart" isEnable></l-echart></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ratio',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		names: {
			type: String,
			default: ''
		},
		excellentNum: {
			type: Number,
			default: 0
		},
		inNum: {
			type: Number,
			default: 0
		},
		differenceNum: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			showInfo: false,
			info: uni.getSystemInfoSync()
		};
	},
	computed: {
		vw: function({ info }) {
			return { width: info.windowWidth + 'px' };
		},
		vh: function({ info }) {
			return { height: info.windowHeight + 'px' };
		},
		option: function({ excellentNum, inNum, differenceNum, names }) {
			let ALL = excellentNum + inNum + differenceNum;
			return {
				grid: [{ left: '10%', top: '5%', right: '5%' }],
				title: {
					text: names,
					left: 'center'
				},
				color: ['#32B16C', '#F29B76', '#59493F'],
				tooltip: {
					trigger: 'item'
				},
				legend: {
					top: '90%',
					orient: 'vertical',
					left: 'center'
				},
				series: [
					{
						name: '检测个数',
						type: 'pie',
						radius: ['20%', '55%'],
						avoidLabelOverlap: false,
						itemStyle: {
							borderRadius: 10,
							borderColor: '#fff',
							borderWidth: 0
						},
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '40',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: [
							{ value: excellentNum, name: `好 ${((excellentNum / ALL) * 100).toFixed(2)}%` },
							{ value: inNum, name: `中 ${((inNum / ALL) * 100).toFixed(2)}%` },
							{ value: differenceNum, name: `差 ${((differenceNum / ALL) * 100).toFixed(2)}%` }
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};
		}
	},
	methods: {
		shows() {
			this.showInfo = !this.showInfo;
		},
		init() {
			this.$refs.chart.setChart(
				chart => {
					chart.setOption(option);
				},
				{ option: this.option }
			);
		}
	},
	watch: {
		option: function(value) {
			this.$nextTick(function() {
				this.init();
			});
		},
		show: function(value) {
			this.showInfo = value;
			this.$nextTick(function() {
				this.init();
			});
		},
		showInfo: function(value) {
			this.$nextTick(function() {
				this.$emit('update:show', value);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.ratio {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	padding: 30rpx;
	flex-direction: center;
	align-items: center;
	justify-content: center;
}

.centerWar {
	width: 690rpx;
	height: 733rpx;
	background-color: #ffffff;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	border-radius: 36rpx;
	overflow: hidden;
	padding: 0 30rpx;
}
.titleWar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	min-height: 104rpx;
	border-bottom: 1px solid #ccd4dd;
}
.titleWarLeft {
}
.titleWarCenter {
	font-size: 34rpx;
	font-weight: 500;
	color: #000000;
	line-height: 44rpx;
}
.titleWarRight {
	width: 30rpx;
	height: 30rpx;
}
.tabWar {
	height: 600rpx;
}
</style>
